<template>
  <el-dialog title="账单催缴" v-model="visible" width="520px" :fullscreen="mobile">
    <el-form :model="form" ref="formRef" label-width="80px">
      <el-form-item label="收件人" prop="phone" :rules="[{ required: true, message: '收件人不能为空', trigger: 'change' }]">
        <el-input v-model="form.phone" placeholder="输入收件人电话" disabled></el-input>
      </el-form-item>
      <el-form-item label="收件人" prop="template" :rules="[{ required: true, message: '请选择催缴模板', trigger: 'change' }]">
        <el-select v-model="form.template">
          <el-option label="账单模板" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预览" prop="params">
        <div class="el-textarea el-textarea__inner">
          <div v-if="form.start">{{ form.start }}</div>
          <div>房间：<span class="warning-word">201</span></div>
          <div>账单名称：<span class="warning-word">房租</span></div>
          <div>金额：<span class="warning-word">2300.00</span></div>
          <div v-if="form.end">
            <span v-if="form.dateFlag">请点击<span class="warning-word">{url链接}</span></span>{{ form.end }}
          </div>
        </div>
        <div>预计产生短信条数：1</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleSend">发送</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="BillCallDl">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const visible = ref(false)
const data = reactive({
  form: {
    phone: null,
    template: null,
    start: '您好，您有一笔账单待支付',
    dateFlag: true,
    end: '进入“泰寓”微信小程序完成支付。'
  }
})
const { form } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')

function handleSend() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      visible.value = false
    }
  })
}

function show() {
  visible.value = true
}
defineExpose({
  show
})
</script>
